@import './abstracts/variable';
@import './abstracts/mixin';
@import './popup.scss';
@import './loading.scss';

@include b(action-sheet) {
  @include e(action) {
    position: relative;
    display: block;
    width: 100%;
    height: $-action-sheet-action-height;
    line-height: $-action-sheet-action-height;
    color: $-action-sheet-color;
    font-size: $-action-sheet-fs;
    text-align: center;
    border: none;
    background: #fff;
    outline: none;
    -webkit-tap-highlight-color: transparent;

    &:active {
      background: $-action-sheet-active-color;
    }
    &::after {
      position: absolute;
      content: '';
      width: 100%;
      height: 1px;
      left: 0;
      bottom: 0;
      background: $-action-sheet-border-color;
      transform: scaleY(0.5);
    }
    &:last-child::after {
      display: none;
    }

    @include m(disabled) {
      color: $-action-sheet-disabled-color;
    }
  }
  @include e(subname) {
    font-size: $-action-sheet-subname-fs;
    color: $-action-sheet-subname-color;
  }
  @include e(cancel) {
    display: block;
    width: 100%;
    line-height: $-action-sheet-action-height;
    padding: 0;
    color: $-action-sheet-color;
    font-size: $-action-sheet-fs;
    text-align: center;
    border: none;
    background: #fff;
    outline: none;
    -webkit-tap-highlight-color: transparent;

    &:active {
      background: $-action-sheet-active-color;
    }
    &::before {
      display: block;
      content: '';
      height: 10px;
      background: $-action-sheet-bg;
    }
  }
  @include e(header) {
    position: relative;
    height: $-action-sheet-title-height;
    line-height: $-action-sheet-title-height;
    text-align: center;
    font-size: $-action-sheet-title-fs;

    &::after {
      position: absolute;
      content: '';
      width: 100%;
      height: 1px;
      left: 0;
      bottom: 0;
      background: $-action-sheet-border-color;
      transform: scaleY(0.5);
    }
  }
  @include e(close) {
    position: absolute;
    top: $-action-sheet-close-top;
    right: $-action-sheet-close-right;
    color: $-action-sheet-close-color;
    font-size: $-action-sheet-close-fs;
    transform: rotate(-45deg);
    line-height: 1.1;
    -webkit-tap-highlight-color: transparent;
  }
}
